<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column u-left-column">
			<view v-for="(item, index) in leftList" :key="index" class="goods-item" @click="route(item)">
				<view class="demo-img-wrap">
					<image class="demo-image" :lazy-load="true" :src="item.icon_url" mode="widthFix"></image>
					<!-- 10.18 -->
					<view class="sendcoin" v-if="item.goodsdetail">
						成交后送{{item.goodsdetail.original_price_discount}}金币
					</view>
				</view>
				<view class="goods-title u-line-1">
					{{item.name}}
				</view>
				<!-- 10.14 修改判断条件 -->
				<view class="goods-content describe lingquan-f"
					v-if="!item.goodsdetail && item.params && item.params.describe && item.params.describe != ''">

					<view class="">
						￥ <text>{{item.params.describe}}</text>
					</view>

					<!-- 领券 -->
					<view class="content" v-if="item.params.content != ''">

						{{item.params.content}}
					</view>
				</view>
				<!-- 10.14 添加 商品专用 -->
				<view class="price" v-if="item.goodsdetail">
					定金 {{'￥' + item.goodsdetail.price}}
				</view>
				<view class="subtitle u-line-2" v-if="item.goodsdetail">
					<!-- 去实体店体验 -->去实体店付<text class="disprice">余款{{item.goodsdetail.original_discount_price}}元</text>
				</view>
				<view class="goldsd" v-if="item.goodsdetail">
					<!-- 10.12 白条金币可抵 10.14 可抵购后返 -->
					<view class="golds">
						金币可抵{{item.goodsdetail.original_discount_price1}}元
					</view>
					<view class="goldd">
						线下成交后返{{item.goodsdetail.original_price_discount}}金币
					</view>
				</view>


			</view>
		</view>
		<view id="u-right-column" class="u-column u-right-column">
			<view v-for="(item, index) in rightList" :key="index" class="goods-item" @click="route(item)">
				<view class="demo-img-wrap">
					<image class="demo-image" :lazy-load="true" :src="item.icon_url" mode="widthFix"></image>
					<!-- 10.18 -->
					<view class="sendcoin" v-if="item.goodsdetail">
						成交后送{{item.goodsdetail.original_price_discount}}金币
					</view>
				</view>
				<view class="goods-title u-line-1">
					{{item.name}}
				</view>
				<!-- 10.14 修改判断条件 -->
				<view class="goods-content describe lingquan-f"
					v-if="!item.goodsdetail && item.params && item.params.describe && item.params.describe != ''">

					<view class="">
						￥ <text>{{item.params.describe}}</text>
					</view>
					<!-- 领券 -->
					<view class="content" v-if="item.params.content != ''">
							{{item.params.content}}
						
					</view>
				</view>

				<!-- 10.14 添加 商品专用 -->
				<view class="price" v-if="item.goodsdetail">
					定金 {{'￥' + item.goodsdetail.price}}
				</view>
				<view class="subtitle u-line-2" v-if="item.goodsdetail">
					<!-- 去实体店体验 -->去实体店付<text class="disprice">余款{{item.goodsdetail.original_discount_price}}元</text>
				</view>
				<view class="goldsd" v-if="item.goodsdetail">
					<!-- 10.12 白条金币可抵 10.14 可抵购后返 -->
					<view class="golds">
						金币可抵{{item.goodsdetail.original_discount_price1}}元
					</view>
					<view class="goldd">
						线下成交后返{{item.goodsdetail.original_price_discount}}金币
					</view>
				</view>


			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	let atime = ''
	export default {
		name: "u-indexware",
		props: {
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			addTime: {
				type: [Number, String],
				default: 200
			}
		},
		provide() {
			return {
				uWaterfall: this
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				attrShow: 0,
				goods: null
			}
		},
		onHide() {
			clearTimeout(atime)
		},
		watch: {
			copyFlowList(nVal, oVal) {
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.length == 0) {
					this.emptyList()
				} else {
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				if (!this.tempList.length) return;

				let leftRect = await this.uGetRect('#u-left-column');
				let rightRect = await this.uGetRect('#u-right-column');
				let item = this.tempList[0];
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
						// console.log("aaaaaaaaaaaaaaaaaaaa", this.rightList);
					} else {
						this.rightList.push(item);

					}
				}
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					atime = setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},

			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},

			buy(item) {
				this.goods = item;
				this.attrShow = Math.random();
			},

			route(item) {
				console.log(item);
				if (item.url == '' || item.url == 'javascript:;' || item.url == '/') {
					return
				}
				if (item.url == '/pages/index/index' || item.url.indexOf('/pages/gospeed/index') != -1 || item.url ==
					'/pages/sixty/index' || item.url == '/pages/user-center/user-center' || item.url ==
					'/pages/store/mine/mine') {
					uni.reLaunch({
						url: item.url + "?id=" + item.id
					})
					return;
				}

				if (item.url.indexOf('?') == -1) {
					uni.navigateTo({
						url: item.url + '?id=' + item.id
					});
				} else {
					uni.navigateTo({
						url: item.url 
					});
				}
			},
			emptyList() {
				this.leftList = [];
				this.tempList = [];
				this.rightList = [];
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 10.18
	.demo-img-wrap {
		position: relative;
	}

	.sendcoin {
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
		background-color: #ff0000;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 4rpx 8rpx;
		border-radius: 32rpx;
	}

	// 10.14 商品显示
	.goldsd {
		margin: 8rpx 14rpx 24rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: bold;

		.golds {
			border: 2rpx solid #e6993f;
			color: #e6993f;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
		}

		.goldd {
			// margin-left: 8rpx;
			border: 2rpx solid #c24341;
			color: #c24341;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
			margin-top: 2rpx;
		}
	}

	.price {
		margin: 8rpx 14rpx;
		color: #FF5238;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.subtitle {
		// margin: 8rpx 14rpx 24rpx;
		margin: 8rpx 14rpx 8rpx;
		font-size: 28rpx;
		line-height: 36rpx;
		// color: rgba(93, 93, 93, 0.8);
		color: rgba(0, 0, 0, 0.8);
		font-weight: bold;

		// 9.28
		.disprice {
			color: #ff0000;
		}
	}

	.u-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
		padding: 0 6rpx;
	}

	.u-column {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	.u-right-column,
	.u-left-column {
		// margin-right: 24upx;
		// margin-left: 7upx;
		display: flex;
		align-items: center;
	}

	// .u-left-column {
	// 	margin-left: 24upx;
	// 	margin-right: 7upx;
	// }

	.demo-image {
		width: 351rpx;
	}

	.goods-item {
		width: 351rpx;
		background-color: #fff;
		margin-top: 20upx;
		overflow: hidden;
		border-radius: 16upx;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
	}

	.goods-title {
		/* font-size: 26upx;
		color: #373737; */
		padding: 0 20upx;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
	}

	.goods-content {
		padding: 0 20upx;
		margin: 12upx 0;
	}

	.gotoli {
		width: 100%;
		text-align: right;
		margin-bottom: 28rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.describe {
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: #F43E3A;
		// font-size: 22upx;
	}

	.describe text {
		font-size: 40rpx;
	}

	.content {
		/* font-size: 18upx;
		color: #b0b0b0; */
		// min-height: 34rpx;
		// min-width: 90rpx;
		width: auto;
		height: 34rpx;
		color: rgba(0, 0, 0, 0.64);
		font-size: 18rpx;
		// line-height:140%;
		// font-weight: 500;
		// text-align: center;
		line-height: 2;
		color: #F43E3A;
		margin:3rpx 0 0 10rpx ;
		background-image: url("../../../static/image/quan2.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 16rpx 12rpx 16rpx;

		// .mj-text {
		// 	font-size: 20rpx;
		// 	font-weight: 500;
		// 	// min-width: 80rpx;
		// 	white-space: nowrap;
		// }
	}

	.lingquan-f {
		display: flex;
	}
</style>
